<!-- 家政 -->
<template>
	<view class="container d-flex pb-30">
		<Navbar title="报告查询" bgColor="#FCDDD7" leftIconColor="#000" :titleStyle="{color: '#000'}" />
		
		<image src="/static/image/housekeeping/banner.svg" mode="widthFix" class="banner" />
		
		<view class="content">
			<Report class="mb-20" />
			
			<RuleForm btnText="立即查询￥39.8">
				<template #head_describe>
					<navigator class="onDetail">报告示例 <Icon name="arrow-right" class="ml-10 relative href_icon" color="#000" size="25rpx" /></navigator>
				</template>
			</RuleForm>
		</view>
	</view>
</template>

<script setup>
		import {reactive} from 'vue'
		import Icon from '@/components/Icon/index.vue'
		import Navbar from '@/components/Navbar/index.vue'
		import Report from '@/query/Housekeeping/components/Report.vue'
		import RuleForm from '@/query/components/ruleForm.vue'
</script>

<style lang="scss" scoped>
	@import '@/query/scss/index.scss';
	
		.container {
			flex-direction: column;
			background-color: #FCDDD7;
			
			.banner {
				margin: auto auto -30rpx;
			}
						
			.content {
				overflow: visible;
			}
			
			.ruleForm {
				box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
			}
			
			.onDetail {
				flex-direction: row;
				align-items: center;
				font: {
					size: 24rpx;
				}
				
				::v-deep {
					.navigator-wrap {
						display: flex;
					}
				}
				
				.href_icon {
					top: 3rpx;
				}
			}
		}
</style>
